<template>
  <div class="inspectionConfirmation">
        <div class="headCrm mlcbg">
            <p class="billHead">
            <span class="el-icon-arrow-left" @click="returnPage"></span>
            <span class="headFont">处理确认</span>
            </p>
        </div>
        <div class="contentCrm">
            <ul class="billConfirmationList">
                <li class="a">
                    <div>客户名称
                        <span>{{billConfirmationList.customerName || '--'}}</span>  
                    </div>                 
                </li>
                <li class="b">
                    <div>售后类型
                        <span>{{billConfirmationList.saleAfterType || '--'}}</span>  
                    </div>                  
                </li>
                <li class="c">
                    <div >处理方案
                        <select class="selectScheme" v-model="selected" name="fruit" @change="getSelected(selected)">
                            <option value="">请选择</option>
                            <option :value="list.processingNum" v-for="(list,index) in billConfirmationList.processingScheme" :key="index" >{{list.text}}
                            </option>
                        </select>
                    </div>     
                </li>
                <li class="d">
                    <p @click="statecrm">备注</p>   
                    <textarea class="remarkText" placeholder="请输入内容"
                        v-model="textarea1" v-show="stateRemark" :class="textarea1.length>40?'':'on'"></textarea>
                </li>
            </ul>
        </div>

        <div class="footCrm">
            <el-button class="submit-btn mlcbg" size="medium" :plain="true" @click="submitBillConfirmation"><p>提交</p> </el-button>
        </div>
  </div>
</template>

<script>
export default {
  name: 'inspectionConfirmation',
  data() {
        return {
            billConfirmationList:{
                customerName:localStorage.getItem("customerName"),
                saleAfterType:localStorage.getItem("tasktypeName"),
                processingScheme:[
                        {text:'维修',processingNum:1},
                        {text:'退货',processingNum:2},
                        {text:'返客',processingNum:3}
                ],
                Remark:'我不想'
            },
            formInline:{
                processingScheme: '',
                aa:'aaa'
            },
            input: '',
            textarea: '',
            stateRemark:true,
            textarea1: '',
            selected: '1',
        }
  },
  methods: {
      submitBillConfirmation:function(){
        let putData = {
            "orderId":localStorage.getItem("detailId"),
            "processingScheme":this.selected,
            "taskType":localStorage.getItem("tasktypeId"),
            "remark":this.textarea1
        }
        let _this = this;
        this.$put(this.$root.domainIp+'maintain/apporder/checkSubmit',{param:this.encrypt(JSON.stringify(putData))})
        .then((response) => {
            console.log(response.code)
            if(response.code == "0"){
                this.$router.push({
                    path:'/inspection'
                })  
            }else {
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
        })
        .catch(function (error) {
            _this.$message({
                message:('请检查网络是否连接!'),
                center: true
            });
        });
      },
      returnPage:function(){
          this.$router.push({
            path:'/inspectionbillDetail'
          })  
      },
      statecrm:function(){
          console.log('state'+this.stateRemark)
          if(this.stateRemark===true){
              this.stateRemark=false;
          }else{
              this.stateRemark=true;
          }
      },
      getSelected:function(select){
        
          console.log(select)
      }
  }
}
</script>


<style scoped>
    /* headCrm */
  .headCrm{
        width:100%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }

    /* contentCrm */
    .contentCrm{
        margin-left:5%;
        width: 90%;
        font-size:0.33rem;
        color: #646464;
    }
    .billConfirmationList li{
        margin:0.33rem 0rem;
        padding-bottom: 0.24rem;
        border-bottom:0.01rem solid #E6E6E6;
    }
   .billConfirmationList li span{
       float:right;
   }
    .el-form.demo-form-inline.el-form--inline{
        width:33%;
        float:right;
        height:0.2rem;
        position:absolute;
        top:3.2rem;
        right:0.13rem;
    }
    .remarkText{
        border:0 none;
        width:100%;
        height:auto;
        padding-top: 0.08rem;
    }
    .remarkText.on{
        height: 0.48rem;
    }
    .el-textarea__inner {
         border:0rem solid #E6E6E6;
    }
    .selectScheme{
        border:none;
        float: right;
        font-size:0.33rem;
        color: #646464;
    }
    .selectScheme option{
        font-size:0.25rem;
    }

       /* footCrm */
    .footCrm{
        margin-left:5%;
        width: 90%;
        padding-top: 5%;
    }
    .submit-btn.mlcbg{
        width: 100%; 
        color: #fff;
    }

</style>


